import { Video, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { AtButton } from "taro-ui";

import "./index.scss";

interface QPVideoPlayProps {
  src?: string;
}

export default ({ src = "播放的视频url" }: QPVideoPlayProps) => {
  const videoContext = Taro.createVideoContext("my-video"); // 获取video的控制api方法

  const handleClick = () => {
    videoContext.pause();
  };

  // 当视频元数据加载完成的时候触发
  const onLoadedMetaData = (event: any) => {
    const { width, height, duration } = event.detail;
    console.log("视频的宽度", width);
    console.log("视频的高度", height);
    console.log("视频的持续时间", duration);
  };

  // 播放进度变化时触发
  const onTimeUpdate = (event: any) => {
    const { currentTime } = event.detail;
    console.log("当前的播放进度", currentTime);
  };

  return (
    <View className="my-video-com">
      <AtButton onClick={handleClick}>按钮</AtButton>
      <Video
        id="my-video"
        src={src}
        // autoplay // 自动播放
        showMuteBtn // 展示静音的按钮
        autoPauseIfNavigate // 当跳转到小程序其他页面的时候自动停止播放
        enableAutoRotation // 手机横屏时自动全屏
        showScreenLockButton // 是否显示锁屏按钮，仅在全屏时显示
        playBtnPosition="center" // 播放按钮的位置为居中展示
        initialTime={0} // 视频播放的初始位置
        direction={90} // 全屏时候视频自动旋转90°
        onLoadedMetaData={onLoadedMetaData} // 当视频元数据加载完成的时候触发
        onTimeUpdate={onTimeUpdate} // 播放进度变化时触发
      />
    </View>
  );
};
